<template>
  <div id="mainbox">
    <h2 class="top_head"><span></span>预约看板</h2>
    <div class="top">
      <div class="box">
        <p>选择日期</p>
        <tiny-date-picker
          :clearable="false"
          v-model="selet1"
          placeholder="请选择日期"
        ></tiny-date-picker>
      </div>
      <div class="box">
        <p>服务人员</p>
        <div class="seled">
          <tiny-select v-model="selet2" clearable>
            <tiny-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </tiny-option>
          </tiny-select>
        </div>
      </div>
      <div class="box">
        <p>服务类型</p>
        <div class="seled">
          <tiny-select v-model="selet3" clearable>
            <tiny-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </tiny-option>
          </tiny-select>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="bigbox"></div>
      <div class="bigbox"></div>
      <div class="bigbox"></div>
      <div class="bigbox"></div>
      <div class="bigbox"></div>
      <div class="bigbox"></div>
      <div class="lastbox"></div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch, watchEffect } from "vue";
import { TinyDatePicker, TinySelect, TinyOption } from "@opentiny/vue";
const selet1 = ref(new Date());
const selet2 = ref("");
const selet3 = ref("");
const options1 = ref([
  { value: "李明浩", label: "李明浩" },
  { value: "张雨婷", label: "张雨婷" },
  { value: "王晓阳", label: "王晓阳" },
  { value: "刘子轩", label: "刘子轩" },
  { value: "赵天磊", label: "赵天磊" },
]);
const options2 = ref([
  { value: "家政护理", label: "家政护理" },
  { value: "康复理疗", label: "康复理疗" },
  { value: "上门体检", label: "上门体检" },
]);

watchEffect(() => {
  let date = new Date(selet1.value || new Date());
  console.log(date.toLocaleDateString("zh-CN"), selet2.value, selet3.value);
  if (selet2.value) {
    console.log("222222222");
  }
  if (selet3.value) {
    console.log("333333333");
  }
});
</script>
<style scoped lang="scss">
#mainbox {
  width: 100%;
  height: calc(100vh - 76px);
  overflow: scroll;
  .top_head {
    font-size: 20px;
    margin: 15px;
    span {
      border: 3.5px solid #3dd4a7;
      display: inline-block;
      height: 23px;
      border-radius: 3px;
      margin-right: 10px;
      position: relative;
      top: 4px;
    }
  }
  .top {
    width: 85%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 40px 0px;
    .box {
      width: 30%;
      display: flex;
      align-items: center;
      p {
        position: relative;
        top: 10px;
        margin-right: 13px;
      }
      .seled {
        width: 70%;
      }
    }
  }

  .main {
    width: 100%;
    .bigbox {
      width: 100%;
      height: 200px;
      border-top: 1.5px solid #767676;
      background-color: antiquewhite;
    }
    .lastbox{
        width: 100%;
        border-bottom: 1px solid #585858;
        margin-bottom: 30px;
    }
  }
}
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
</style>
